<template>
  <div class="inviteFriends hideScrollBar" ref="scrollEl">
    <!-- 导航 -->
    <NavBar
      :title="$t('inviteFriends.pageTitle')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      isFixed
    />
    <!-- 背景渐变色 -->
    <div class="inviteFriends-bg"></div>
    <!-- 滚动通知组件 -->
    <Broadcast
      v-if="broadcasts.length > 1"
      class="broadcastview"
      :list="broadcasts"
      :speed="66"
    >
      <template #cell="data">
        <AirdropCell
          v-for="(source, index) in data.list"
          :key="`${data.prefix}-${source.id || index}`"
          :item="source"
        ></AirdropCell>
      </template>
    </Broadcast>
    <!-- 下拉刷新 -->
    <ClientOnly>
      <van-pull-refresh
        class="pull-refresh"
        v-model="loading"
        :pulling-text="t('mvp.other.text9')"
        :loosing-text="t('mvp.other.text10')"
        loading-text=" "
        @refresh="onRefreshRequest"
      >
        <!-- 头部 -->
        <div class="header">
          <!-- 背景封面图片 -->
          <img
            class="header-bgimg"
            src="/image/inviteFriends/header-bgimg1.png"
          />
          <!-- 活动说明 -->
          <div class="header-rightdesc" @click="jumpPage('inviteFriendsDesc')">
            <img class="header-rightdesc-icon" src="/image/wh4-icon.svg" />
          </div>
          <!-- 会员信息 -->
          <div class="header-user" v-if="inviteFriends">
            <!-- 会员等级图片背景 -->
            <img
              v-if="inviteFriends.vipLevel == 1"
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v1-icon.png"
            />
            <img
              v-else-if="inviteFriends.vipLevel == 2"
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v2-icon.png"
            />
            <img
              v-else-if="inviteFriends.vipLevel == 3"
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v3-icon.png"
            />
            <img
              v-else-if="inviteFriends.vipLevel == 4"
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v4-icon.png"
            />
            <img
              v-else-if="inviteFriends.vipLevel >= 5"
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v5-icon.png"
            />
            <img
              v-else
              class="header-user-levelimg"
              src="/image/inviteFriends/header-v0-icon.png"
            />
            <!-- 会员等级 -->
            <div class="header-user-level items-center">
              <div>
                {{ $t("inviteFriends.nsText") }}
                {{ inviteFriends.vipLevel >= 3 ? $t("inviteFriends.zgd") : "" }}
                VIP{{ inviteFriends.vipLevel }}
              </div>
              <img
                class="header-user-level-icon"
                src="/image/wh5-icon.svg"
                @click="isShowDesc"
              />
            </div>
            <!-- 奖励的 BDC -->
            <div class="header-user-reward items-center">
              {{ $t("inviteFriends.ndhykhd") }}
              <div class="header-user-reward-sub">
                {{ inviteFriends.friendPrizeAmount }}
              </div>
              BDC
            </div>
          </div>
          <!-- 底部边框图片 -->
          <img
            class="header-bottomimg"
            src="/image/inviteFriends/header-bottom-icon.svg"
          />
        </div>
        <!-- 增加一个容器,用于遮挡背景色 -->
        <div class="inviteFriends-contentbg">
          <!-- 奖励说明 -->
          <div class="rewardTips">
            <!--  描述 1 -->
            <div class="rewardTips-title items-center">
              <img
                class="rewardTips-title-leftimg"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="rewardTips-title-text">
                {{ $t("inviteFriends.hylcj") }}
              </div>
              <img
                class="rewardTips-title-rightimg"
                src="/image/assetDetails/desc-logo.svg"
              />
            </div>
            <div class="rewardTips-info items-center">
              <img
                class="rewardTips-info-leftimg"
                src="/image/inviteFriends/yqhycj-icon.svg"
              />
              <div class="rewardTips-info-text">
                {{ $t("inviteFriends.mthdjl") }}
              </div>
              <img
                class="rewardTips-info-rightimg"
                src="/image/inviteFriends/rewardTips-rightimg.png"
              />
            </div>
            <!-- 分割线 -->
            <div class="rewardTips-info-line"></div>
            <!-- 描述 2 -->
            <div class="rewardTips-title items-center">
              <img
                class="rewardTips-title-leftimg"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="rewardTips-title-text" style="text-align: center">
                {{ $t("inviteFriends.hycwdyj") }}
              </div>
              <img
                class="rewardTips-title-rightimg"
                src="/image/assetDetails/desc-logo.svg"
              />
            </div>
            <div class="rewardTips-info items-center">
              <img
                class="rewardTips-info-leftimg"
                src="/image/inviteFriends/dyj-icon.svg"
              />
              <div class="rewardTips-info-text">
                {{ $t("inviteFriends.ndhyjhdjl") }}
              </div>
              <img
                class="rewardTips-info-rightimg"
                src="/image/inviteFriends/rewardTips-rightimg1.png"
              />
            </div>
          </div>
          <!-- 大嬴家最大的三个奖金 -->
          <div v-if="topSessioinList.length > 0" class="header-winners">
            <!-- 标题 -->
            <div class="header-winners-title items-center">
              <img
                class="header-winners-title-icon"
                src="/image/title-blue-icon.svg"
              />
              <div class="header-winners-title-text">
                {{ $t("inviteFriends.dyjm") }}
              </div>
              <img
                class="header-winners-title-icon"
                src="/image/title-blue-icon.svg"
              />
            </div>
            <!-- 列表 -->
            <div class="header-winners-list items-center">
              <div
                v-for="item in topSessioinList"
                :key="item.sessionId"
                class="header-winners-list-item items-center"
              >
                <img
                  class="header-winners-list-item-bg"
                  src="/image/inviteFriends/winners-item-bg.svg"
                />
                <!-- 头像 -->
                <div class="header-winners-list-item-tx items-center">
                  <img
                    class="header-winners-list-item-tx-bg"
                    src="/image/inviteFriends/sahre-winner-txbg.png"
                  />
                  <ImgNuxt
                    class="header-winners-list-item-tx-avatar"
                    :src="item.avatar || file.avatarDefault"
                    :placeholder="file.avatarDefault"
                    isHttp
                  ></ImgNuxt>
                </div>
                <div class="header-winners-list-item-nickname">
                  {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
                  {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
                </div>
                <div class="header-winners-list-item-value">
                  ${{ toThousands(decimalToLength(item.sessionPrizeAmount)) }}
                </div>
              </div>
            </div>
          </div>
          <!-- 邀友统计 -->
          <div class="statistics">
            <!-- bdc -->
            <div
              class="statistics-top items-center"
              @click="jumpPage('rewardDetail')"
            >
              <div class="statistics-top-left">
                <div class="statistics-top-bdc">
                  {{
                    toThousands(
                      decimalToLength(
                        inviteFriends
                          ? inviteFriends.historyStatistics.totalPrizeAmount
                          : 0
                      )
                    )
                  }}
                  BDC
                </div>
                <div class="statistics-top-text">
                  {{ $t("inviteFriends.ljhdjl") }}
                </div>
              </div>
              <img
                class="statistics-top-right"
                src="/image/inviteFriends/statistics-right.svg"
              />
            </div>
            <!-- 数量 -->
            <div class="statistics-bottom items-center">
              <div class="statistics-bottom-item">
                <div class="statistics-bottom-item-num">
                  {{
                    inviteFriends
                      ? inviteFriends.historyStatistics.totalInviteUserCount
                      : 0
                  }}
                </div>
                <div class="statistics-bottom-item-text">
                  {{ $t("inviteFriends.ljyqhy") }}
                </div>
              </div>
              <div class="statistics-bottom-line"></div>
              <div class="statistics-bottom-item" style="width: 52%">
                <div class="statistics-bottom-item-num">
                  {{
                    inviteFriends
                      ? inviteFriends.historyStatistics
                          .totalInviteSuperWinnerCount
                      : 0
                  }}
                </div>
                <div class="statistics-bottom-item-text">
                  {{ $t("inviteFriends.hyhddyjcs") }}
                </div>
              </div>
            </div>
          </div>

          <!-- tab 任务/进度 -->
          <div class="list">
            <!-- tab -->
            <div class="list-tab items-center">
              <div
                class="list-tab-item"
                :class="{ 'list-tab-item-activity': tabIdx == 1 }"
                style="width: 62%"
                @click="tabChange(1)"
              >
                {{ $t("inviteFriends.yqhyjl") }}
              </div>
              <div
                class="list-tab-item"
                :class="{ 'list-tab-item-activity': tabIdx == 2 }"
                style="width: 38%"
                @click="tabChange(2)"
              >
                {{ $t("inviteFriends.wdyq") }}
              </div>
            </div>
            <!-- 邀请好友奖励 -->
            <div v-if="tabIdx == 2" class="list-reward">
              <!-- tabsub -->
              <div class="list-reward-header items-center">
                <div
                  class="list-reward-header-item"
                  :class="{
                    'list-reward-header-item-activity': rewardIdx == 1,
                  }"
                  @click="rewardTabChange(1)"
                >
                  {{ $t("inviteFriends.all") }}
                </div>
                <div
                  class="list-reward-header-item"
                  :class="{
                    'list-reward-header-item-activity': rewardIdx == 2,
                  }"
                  @click="rewardTabChange(2)"
                >
                  {{ $t("inviteFriends.jxz") }}
                </div>
                <div
                  class="list-reward-header-item"
                  :class="{
                    'list-reward-header-item-activity': rewardIdx == 3,
                  }"
                  @click="rewardTabChange(3)"
                >
                  {{ $t("inviteFriends.ywc") }}
                </div>
              </div>
              <!-- 奖励列表 -->
              <div class="list-reward-list">
                <template v-if="recordList.length > 0">
                  <div
                    class="list-reward-list-item"
                    v-for="(item, index) in recordList"
                    :key="`${item.id}${item.sid}`"
                    :class="{
                      'list-reward-list-item-bm':
                        index != recordList.length - 1,
                    }"
                    @click="showUserInfo(item)"
                  >
                    <div class="list-reward-list-item-top items-center">
                      <ImgNuxt
                        class="list-reward-list-item-top-left"
                        :src="item.avatar || file.avatarDefault"
                        :placeholder="file.avatarDefault"
                        isHttp
                      ></ImgNuxt>
                      <div class="list-reward-list-item-top-right">
                        <div
                          class="list-reward-list-item-top-right-top items-center"
                        >
                          <div class="list-reward-list-item-top-right-title">
                            {{ `${item.sid}`.substring(3, 100) }}
                          </div>
                          <img
                            class="list-reward-list-item-top-right-icon"
                            src="/image/jt-right-icon.svg"
                          />
                        </div>
                        <div class="list-reward-list-item-top-right-desc">
                          {{
                            useDateFormat(
                              Number(item.regTime),
                              "YYYY-MM-DD HH:mm:ss"
                            ).value
                          }}
                        </div>
                      </div>
                    </div>
                    <!-- prizeStatus 任务状态 0:进行中 1:已完成 2:风控拒绝 -->
                    <div class="list-reward-list-item-bottom items-center">
                      <div class="list-reward-list-item-bottom-left">
                        <van-progress
                          v-if="item.prizeStatus != 2"
                          class="list-reward-list-item-bottom-left-progress"
                          :percentage="
                            (Number(item.finishCount) /
                              Number(item.totalCount)) *
                            100
                          "
                          stroke-width="8"
                          track-color="transparent"
                          color="#007BFF"
                          :show-pivot="false"
                        />
                      </div>
                      <div class="list-reward-list-item-bottom-right">
                        <div v-if="item.prizeStatus != 2" class="items-center">
                          <div class="list-reward-list-item-bottom-left-text">
                            {{ $t("inviteFriends.jlText") }}
                          </div>
                          <div class="list-reward-list-item-bottom-right-bdc">
                            {{
                              decimalToLength(
                                (Number(item.finishCount) /
                                  Number(item.totalCount)) *
                                  100,
                                0
                              )
                            }}
                            %
                          </div>
                        </div>
                        <div
                          v-else
                          class="list-reward-list-item-bottom-left-text"
                        >
                          {{ $t("inviteFriends.wxjl") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 无数据 -->
                <div v-else class="notData items-center">
                  <img class="notData-img" src="/image/notdate-icon.png" />
                  <div class="notData-desc">{{ t("mvp.other.zwnr") }}</div>
                </div>
              </div>
            </div>
            <!-- 邀请任务 -->
            <div v-else class="list-task">
              <template v-if="taskList.length > 0">
                <div
                  class="list-task-item"
                  v-for="(item, index) in taskList"
                  :key="item.taskType"
                  :class="{
                    'list-task-item-bm': index != taskList.length - 1,
                  }"
                >
                  <div class="list-task-item-top items-center">
                    <!-- 2:注册并绑定手机 3:模拟平仓盈利 4:看直播 5:质押首充 6:好友成为大赢家 -->
                    <img
                      v-if="item.taskType == 2"
                      class="list-task-item-top-left"
                      src="/image/inviteFriends/rewardTips-leftimg.svg"
                    />
                    <img
                      v-else-if="item.taskType == 3"
                      class="list-task-item-top-left"
                      src="/image/inviteFriends/mnzh-icon.svg"
                    />
                    <img
                      v-else-if="item.taskType == 4"
                      class="list-task-item-top-left"
                      src="/image/inviteFriends/kzb-icon.svg"
                    />
                    <img
                      v-else-if="item.taskType == 5"
                      class="list-task-item-top-left"
                      src="/image/inviteFriends/zy-icon.svg"
                    />
                    <img
                      v-else-if="item.taskType == 6"
                      class="list-task-item-top-left"
                      src="/image/inviteFriends/dyj-icon.svg"
                    />

                    <div class="list-task-item-top-right">
                      <div class="list-task-item-top-right-top items-center">
                        <div class="list-task-item-top-right-title">
                          {{ taskDetaeil(item.taskType).title }}
                        </div>
                        <!-- <img
                        class="list-task-item-top-right-icon"
                        src="/image/jt-right0-icon.svg"
                      /> -->
                      </div>
                      <div class="list-task-item-top-right-desc">
                        {{ taskDetaeil(item.taskType).desc }}
                      </div>
                    </div>
                  </div>
                  <div class="list-task-item-bottom items-center">
                    <div class="list-task-item-bottom-left">
                      <div v-if="item.taskType == 6" class="items-center">
                        <div class="list-task-item-bottom-left-text">
                          {{ $t("inviteFriends.jlcs") }}
                        </div>
                        <div class="list-task-item-bottom-left-bdc">
                          {{ item.finishCount }}
                        </div>
                      </div>
                      <div v-else class="items-center">
                        <van-progress
                          class="list-task-item-bottom-left-progress"
                          :percentage="
                            (Number(item.finishCount) /
                              Number(item.totalCount)) *
                            100
                          "
                          stroke-width="8"
                          track-color="transparent"
                          color="#007BFF"
                          :show-pivot="false"
                        />
                        <div class="list-task-item-bottom-left-text">
                          {{ item.finishCount }}/{{ item.totalCount }}
                        </div>
                      </div>
                    </div>
                    <div class="list-task-item-bottom-right items-center">
                      <img
                        class="list-task-item-bottom-right-icon"
                        src="/image/bdc.svg"
                      />
                      <div class="list-task-item-bottom-right-bdc">
                        {{
                          item.taskType != 6
                            ? item.prizeAmount
                            : item.acquiredPrizeAmount
                        }}
                        BDC
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 无数据 -->
              <div v-else class="notData items-center">
                <img class="notData-img" src="/image/notdate-icon.png" />
                <div class="notData-desc">{{ t("mvp.other.zwnr") }}</div>
              </div>
            </div>
            <!--  -->
          </div>
        </div>
      </van-pull-refresh>
    </ClientOnly>
    <!-- 底部邀请按钮 -->
    <div class="footer" v-if="inviteFriends && inviteFriends.inviteCode">
      <div class="footer-top items-center">
        <div class="footer-top-left">{{ $t("inviteFriends.yqurl") }}</div>
        <!-- 地址 -->
        <div class="footer-top-center">
          {{ shareUrl }}
        </div>
        <!-- 复制按钮 -->
        <img
          class="footer-top-copy"
          src="/image/inviteFriends/footer-copy.svg"
          @click="saveCopy"
        />
      </div>
      <!-- 按钮 -->
      <div class="footer-bottom" @click="shareApp">
        {{ $t("inviteFriends.fxghy") }}
      </div>
    </div>
    <!-- 好友进度弹窗 -->
    <!-- v-if="progressPopupInfo" -->
    <RewardProgressPopup
      v-model:show="isSHowRewardProgress"
      :detail="progressPopupInfo"
    ></RewardProgressPopup>
    <!-- 等级越高,更多奖励 -->
    <RewardMorePopup v-model:show="isSHowRewardMore"> </RewardMorePopup>
    <!-- 谷歌注册 -->
  </div>
</template>
<script setup name="inviteFriends">
import {
  toThousands,
  navigateI18nTo,
  getOssFileUrl,
  decimalToLength,
} from "@/utils";
import {
  getMyInviteInfo,
  getRecentInvitePrizeRecord,
  getMyInviteRecord,
} from "@/api/inviteFriends";
import Broadcast from "~/components/info-scroll/index.vue";
import AirdropCell from "../../components/info-scroll/airdrop.vue";
import RewardProgressPopup from "~/components/invite-friends/reward-progress.vue";
import RewardMorePopup from "~/components/invite-friends/reward-more.vue";
import { useClipboard } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";
import { useDateFormat } from "@vueuse/core";
import { usePageVisibility } from "@vant/use";

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

const scrollEl = ref();
const route = useRoute();
const { t } = useI18n();
console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase();

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  sharePage: "/invite-friends/share",
});

/**************** 等级奖励弹窗 ****************/
const isSHowRewardMore = ref(false);
const isShowDesc = () => {
  isSHowRewardMore.value = true;
};

/**
 * @description: 页面信息查询
 */
const inviteFriends = ref(null); // 邀请好友页面信息
const taskList = ref([]); // 任务列表
const taskDetaeil = (type) => {
  // 2:注册并绑定手机 3:模拟平仓盈利 4:看直播 5:质押首充 6:好友成为大赢家
  if (type == 2) {
    return {
      title: t("inviteFriends.hyzc"),
      desc: t("inviteFriends.yqhyzccg"),
    };
  } else if (type == 3) {
    return {
      title: t("inviteFriends.hymnyl"),
      desc: t("inviteFriends.hymnpcylDesc"),
    };
  } else if (type == 4) {
    return {
      title: t("inviteFriends.hykzb"),
      desc: t("inviteFriends.hykzbDesc"),
    };
  } else if (type == 5) {
    return {
      title: t("inviteFriends.hywccz"),
      desc: t("inviteFriends.hywcczDesc"),
    };
  } else if (type == 6) {
    return {
      title: t("inviteFriends.hycwdyj"),
      desc: t("inviteFriends.hycwdyj") + "，" + t("inviteFriends.hycwdyjDesc"),
    };
  } else {
    return {
      title: "--",
      desc: "--",
    };
  }
};
const topSessioinList = ref([]); // top3奖金列表
const getMyInviteInfoRequest = () => {
  return getMyInviteInfo().then((res) => {
    console.log("页面信息:", res);
    if (res) {
      inviteFriends.value = res;
      taskList.value = res.taskList || [];
      topSessioinList.value = res.topSessioinList || [];
    }
  });
};

/**
 * @description: 我的邀请记录
 */
const recordList = ref([]);
const getMyInviteRecordRequest = (type, isLoading) => {
  if (isLoading) {
    showLoadingToast({
      message: `${t("common.requestIng")}...`,
      forbidClick: true,
      duration: 15000,
    });
  }

  getMyInviteRecord({
    pageNum: 1,
    pageSize: 99999,
    taskStatus: type != null ? type : null, // 为空:查询全部状态 0:进行中 1:已完成
  }).then((res) => {
    console.log("我的邀请记录:", res);
    if (res) {
      recordList.value = res.records || [];
    }
  });
};

// 奖励 tab: 1: 全部 2: 进行中 3: 已完成
const rewardIdx = ref(1);
const rewardTabChange = (val) => {
  rewardIdx.value = val;
  if (val == 1) {
    getMyInviteRecordRequest(null, true);
  } else {
    getMyInviteRecordRequest(val == 2 ? 0 : 1, true);
  }
};

/**
 * @description: 获取用户任务进度
 */
const isSHowRewardProgress = ref(false);
const progressPopupInfo = ref(null); // 弹窗信息

const showUserInfo = (val) => {
  console.log("获取用户任务进度:", val);
  if (!val) return;
  progressPopupInfo.value = val;
  nextTick(() => {
    isSHowRewardProgress.value = true;
  });
};
/**
 * @description: 获取-查询挖矿动态
 */
const broadcasts = ref([]);
const getRecentInvitePrizeRecordRequest = async () => {
  broadcasts.value = [];
  const res = await getRecentInvitePrizeRecord();
  if (res) {
    broadcasts.value = res.map((e, idx) => {
      // 处理头像问题
      let avatar = e.avatar;
      if (!avatar || avatar == "https://asset.onetrader.online/") {
        avatar = file.avatarDefault;
      } else {
        avatar = getImagePrefix() + e.avatar;
      }
      return {
        id: idx,
        avatar,
        acquireAmount: e.acquireAmount,
        nickname: e.nickname,
      };
    });
    // broadcasts.value = broadcasts.value.slice(0, 6);
  }
};

/**
 * @description: 页面刷新请求
 */
const loading = ref(false);
const onRefreshRequest = () => {
  try {
    console.warn("下拉刷新了");
    loading.value = true;
    // 2. 页面信息查询
    getMyInviteInfoRequest().then(() => {
      loading.value = false;
    });
    // 3. 轮播信息
    getRecentInvitePrizeRecordRequest();
    // 4. 我的邀请记录
    if (rewardIdx.value == 1) {
      getMyInviteRecordRequest(null, false);
    } else {
      getMyInviteRecordRequest(rewardIdx.value == 2 ? 0 : 1, false);
    }
  } catch (error) {
    loading.value = false;
  }
};

// 分享地址
const shareUrl = computed(() => {
  return (
    file.sharePage +
    "?hiddenBar=1" +
    `&language=${globalStore.$state.language}` +
    `&packageId=${globalStore.$state.packageId}` +
    `&code=${inviteFriends.value ? inviteFriends.value.inviteCode : ""}`
  );
});

// 页面可见状态(当前页面是否进入后台) https://vant-contrib.gitee.io/vant/#/zh-CN/use-page-visibility
const pageVisibility = usePageVisibility();
const stopWatch = watch(pageVisibility, (value) => {
  // 1. 进入后台
  if (value == "visible") {
    console.warn("从后台, 进入-前台");
    getRecentInvitePrizeRecordRequest();
  }
  // 2. 进入前台
  else {
    console.warn("此刻,从前台, 进入-后台:", Date.now());
  }
});

onMounted(() => {
  // 1. 埋点
  firebase?.logEvent("BDC_H5_invite_friends_PUV");
  // 2. 页面信息查询
  getMyInviteInfoRequest();
  // 3. 轮播信息
  getRecentInvitePrizeRecordRequest();
  // 4. 我的邀请记录
  // getMyInviteRecordRequest(null, false);
});
onBeforeUnmount(() => {
  stopWatch && stopWatch();
});
// tab: 任务/奖励
const tabIdx = ref(1);
const tabChange = (val) => {
  tabIdx.value = val;
  if (val == 2) {
    // 奖励 tab: 1: 全部 2: 进行中 3: 已完成
    if (rewardIdx.value == 1) {
      getMyInviteRecordRequest(null, false);
    } else {
      getMyInviteRecordRequest(rewardIdx.value == 2 ? 0 : 1, false);
    }
  }
};

/**
 * @description: 保存到剪贴板
 */
const saveCopy = () => {
  if (!file.sharePage) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    copy(shareUrl.value);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};
/****************** 分享 ******************/
let shareLoading = false;
const shareApp = (type) => {
  if (shareLoading) return;
  try {
    shareLoading = true;
    console.log("分享地址:", shareUrl.value);
    bridge.onShare(t("inviteFriends.shareTitle"), shareUrl.value);
  } catch (error) {
    console.log(error);
  } finally {
    // 延时 1s，防止用户连续点击
    setTimeout(() => {
      shareLoading = false;
    }, 1000);
  }
};

/**
 * @description: 页面跳转
 * @param {*} type 页面标识
 * @param {*} isApp 是不是app 原生页面
 */
const jumpPage = async (type, isApp = false) => {
  if (isApp) {
  } else if (type === "inviteFriendsDesc") {
    firebase?.logEvent("BDC_H5_LotteryMoney_Desc_PUV"); // 埋点访问
    await navigateI18nTo({ path: "/invite-friends/desc" });
  } else if (type === "rewardDetail") {
    firebase?.logEvent("BDC_H5_LotteryMoney_Desc_PUV"); // 埋点访问
    await navigateI18nTo({ path: "/invite-friends/reward-details" });
  }
};
</script>
<style lang="scss" scoped>
.inviteFriends {
  position: relative;
  background-color: #e1edfa;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(var(--safe-area-inset-bottom) + 120 * 2px);

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #8dc4ff 0%, #c6fafc 75%, #c6fafc 100%);
    width: 100vw;
    height: calc(88 * 2px + 375 * 2px);
  }
  &-contentbg {
    position: relative;
    width: 100vw;
    background-color: #e1edfa;
  }
}

.header {
  position: relative;
  top: -12 * 2px;
  width: 100vw;
  height: 275 * 2px;

  &-bgimg {
    position: absolute;
    top: -99 * 2px;
    left: -2px;
    width: 101vw;
    object-fit: cover;
  }
  &-rightdesc {
    position: absolute;
    z-index: 9;
    top: 47 * 2px;
    right: 0 * 2px;
    padding: 3 * 2px 15 * 2px;
    border-radius: 100px 0px 0 100px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    justify-content: center;
    box-shadow: -8px 8px 32px 0px rgba(0, 0, 0, 0.1);
    &-icon {
      width: 17 * 2px;
      height: 17 * 2px;
    }
    &-fail {
      top: 77 * 2px;
    }
  }
  &-user {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 15 * 2px;
    width: calc(100vw - 15 * 4px);
    height: 100 * 2px;
    border-radius: 12 * 2px;
    overflow: hidden;

    &-levelimg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    &-level {
      position: absolute;
      z-index: 9;
      top: 0;
      left: 0;
      border-bottom-right-radius: 12 * 2px;
      border-radius: 12 * 2px 0px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(30px);
      padding: 4 * 2px 8 * 2px;
      color: #3065bb;
      font-size: 13 * 2px;
      font-weight: 400;
      &-icon {
        margin-left: 8 * 2px;
        width: 14 * 2px;
        height: 14 * 2px;
      }
    }
    &-reward {
      position: absolute;
      z-index: 9;
      top: 40 * 2px;
      left: 18 * 2px;
      color: #fff;
      font-size: 14 * 2px;
      font-weight: 590;
      &-sub {
        min-width: 69px;
        padding: 4 * 2px 9 * 2px;
        margin: 0 6 * 2px;
        border-radius: 8 * 2px;
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0.8) 0%,
          rgba(238, 227, 255, 0.8) 49.89%,
          rgba(255, 255, 255, 0.8) 100%
        );
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset;
        color: #007bff;
        text-align: center;
        font-size: 24 * 2px;
        font-weight: 700;
      }
    }
  }
  &-bottomimg {
    position: absolute;
    z-index: 9;
    bottom: -16 * 2px;
    left: 0;
    width: 100vw;
    height: 44 * 2px;
    object-fit: cover;
  }
  &-winners {
    position: relative;
    padding: 15 * 2px 10 * 2px;
    margin: 0 15 * 2px;
    margin-bottom: 10 * 2px;
    border-radius: 12px;
    background: #fff;
    &-title {
      position: relative;
      justify-content: center;
      margin-bottom: 15 * 2px;
      &-icon {
        margin: 0 * 2px 12 * 2px;
        margin-top: 4 * 2px;
        width: 10 * 2px;
        height: 10 * 2px;
      }
      &-text {
        font-size: 17 * 2px;
        color: #002853;
        font-weight: 590;
      }
    }
    &-list {
      position: relative;
      z-index: 1;
      width: 100%;
      justify-content: space-between;
      padding-bottom: 25 * 2px;
      &-item {
        position: relative;
        flex-direction: column;
        justify-content: center;
        width: 107 * 2px;
        &-bg {
          position: absolute;
          top: 0;
          left: 0;
          min-width: 107 * 2px;
        }
        &-tx {
          z-index: 1;
          position: relative;
          justify-content: center;
          width: 60 * 2px;
          height: 60 * 2px;
          margin-top: 8 * 2px;
          &-bg {
            position: absolute;
            z-index: 6;
            top: 0;
            left: 0;
            width: 60 * 2px;
            height: 60 * 2px;
          }
          &-avatar {
            position: relative;
            z-index: 5;
            margin-top: 5 * 2px;
            width: 40 * 2px;
            height: 40 * 2px;
            border-radius: 100px;
            overflow: hidden;
          }
        }
        &-nickname {
          position: relative;
          z-index: 1;
          font-size: 12 * 2px;
          color: #002853;
          font-weight: 590;
          margin: 6 * 2px 0 * 2px;
        }
        &-value {
          position: relative;
          z-index: 1;
          width: 100%;
          text-align: center;
          padding: 4 * 2px 6 * 2px;
          background: linear-gradient(
            90deg,
            rgba(41, 184, 255, 0) 0%,
            rgba(41, 184, 255, 0.4) 50.4%,
            rgba(41, 184, 255, 0) 100%
          );
          font-size: 15 * 2px;
          color: #007bff;
          font-weight: 590;
        }
      }
    }
    &-left {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 19;
      width: 40 * 2px;
      height: 43 * 2px;
    }
    &-right {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 19;
      width: 40 * 2px;
      height: 43 * 2px;
    }
  }
}

.rewardTips {
  position: relative;
  z-index: 9;
  padding: 15 * 2px 10 * 2px;
  margin: 0 15 * 2px;
  margin-bottom: 10 * 2px;
  border-radius: 12 * 2px;
  overflow: hidden;
  border: 1px solid #fff;
  background: linear-gradient(174deg, #c8f5f5 4.54%, #eff7ff 95.48%);

  &-title {
    justify-content: center;
    margin-bottom: 10 * 2px;
    &-leftimg {
      height: 9 * 2px;
      margin-right: 10 * 2px;
    }
    &-rightimg {
      height: 9 * 2px;
      margin-left: 10 * 2px;
    }
    &-text {
      color: #002853;
      font-size: 14 * 2px;
      font-weight: 590;
    }
  }
  &-info {
    border-radius: 12 * 2px;
    overflow: hidden;
    padding: 10 * 2px;
    background: #fff;
    &-leftimg {
      width: 48 * 2px;
      height: 48 * 2px;
      margin-right: 8 * 2px;
    }
    &-text {
      color: #84abd6;
      font-size: 12 * 2px;
      font-weight: 400;
      padding-right: 8 * 2px;
      margin-right: 8 * 2px;
      border-right: 1px dashed rgba(115, 119, 128, 0.15);
      line-height: 16 * 2px;
    }
    &-rightimg {
      width: 130 * 2px;
      height: 54 * 2px;
    }
    &-line {
      width: 100%;
      height: 0.7px;
      background-color: rgba(115, 119, 128, 0.15);
      margin: 12 * 2px 0;
    }
  }
}

.statistics {
  position: relative;
  z-index: 9;
  background-color: #fff;
  margin: 0 15 * 2px;
  border-radius: 12 * 2px;
  padding: 15 * 2px 10 * 2px;
  margin-bottom: 10 * 2px;
  &-top {
    justify-content: space-between;
    padding-bottom: 14 * 2px;
    border-bottom: 1px solid rgba(115, 119, 128, 0.15);

    &-bdc {
      color: #007bff;
      font-size: 16 * 2px;
      font-weight: 600;
      margin-bottom: 6 * 2px;
    }
    &-text {
      color: rgba(136, 142, 147, 0.9);
      font-size: 13 * 2px;
      font-weight: 400;
    }

    &-right {
      width: 24 * 2px;
      height: 24 * 2px;
    }
  }
  &-bottom {
    padding-top: 14 * 2px;
    justify-content: space-between;
    &-item {
      width: calc(50% - 15.5 * 4px);
      height: 100%;
      &-num {
        color: #0d1824;
        font-size: 16 * 2px;
        font-weight: 600;
        margin-bottom: 4 * 2px;
      }
      &-text {
        // min-height: 36 * 2px;
        color: rgba(136, 142, 147, 0.9);
        font-size: 13 * 2px;
        font-weight: 400;
        line-height: 18 * 2px;
      }
    }
    &-line {
      margin: 0 15 * 2px;
      height: 38 * 2px;
      width: 0.7px;
      background-color: rgba(115, 119, 128, 0.15);
    }
  }
}
.list {
  position: relative;
  border-radius: 12 * 2px;
  overflow: hidden;
  background: #fff;
  margin: 0 15 * 2px;
  min-height: 552 * 2px;
  &-tab {
    &-item {
      @include multi-line-omit(1);
      // min-width: 36%;
      box-sizing: content-box;
      padding: 10 * 2px 5 * 2px;
      text-align: center;
      font-size: 13 * 2px;
      font-weight: 590;
      &-activity {
        border-radius: 12 * 2px 12 * 2px 0 0;
        background: #007bff;
        color: #fff;
      }
    }
  }
  &-task {
    padding: 15 * 2px 10 * 2px;
    &-item {
      border-radius: 12 * 2px;
      border: 1px solid rgba(115, 119, 128, 0.15);
      &-bm {
        margin-bottom: 20 * 2px;
      }
      &-top {
        margin: 0 10 * 2px;
        padding: 10 * 2px 0;
        border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);
        &-left {
          width: 48 * 2px;
          height: 48 * 2px;
          margin-right: 10 * 2px;
        }
        &-right {
          flex: 1;
          &-top {
            width: 100%;
            justify-content: space-between;
          }
          &-title {
            @include multi-line-omit(1);
            color: #0d1824;
            font-size: 14 * 2px;
            font-weight: 510;
            line-height: 20 * 2px;
          }
          &-icon {
            margin-left: 10 * 2px;
            width: 20px;
            height: 20px;
          }
          &-desc {
            color: rgba(136, 142, 147, 0.9);
            font-size: 13 * 2px;
            font-weight: 400;
            line-height: 18 * 2px;
          }
        }
      }
      &-bottom {
        padding: 6 * 2px 10 * 2px;
        justify-content: space-between;
        &-left {
          &-text {
            color: #999da7;
            font-size: 13 * 2px;
            font-weight: 400;
          }
          &-bdc {
            color: #007bff;
            font-size: 13 * 2px;
            font-weight: 590;
          }
          &-progress {
            border: 2px solid #99caff;
            margin-right: 12 * 2px;
            width: 140 * 2px;
          }
        }
        &-right {
          justify-content: space-between;
          &-icon {
            width: 18 * 2px;
            height: 18 * 2px;
            margin-right: 4 * 2px;
          }
          &-bdc {
            color: #007bff;
            font-size: 13 * 2px;
            font-weight: 510;
          }
        }
      }
    }
  }
  &-reward {
    padding: 10 * 2px;
    &-header {
      margin-bottom: 16 * 2px;
      &-item {
        padding: 4 * 2px 8 * 2px;
        color: #999da7;
        font-size: 13 * 2px;
        font-weight: 510;
        border-radius: 4 * 2px;
        background: #f0f3fa;
        margin-right: 12 * 2px;
        &-activity {
          color: #007bff;
          background: #ecf5ff;
        }
      }
    }
    &-list {
      &-item {
        border-radius: 12 * 2px;
        border: 1px solid rgba(115, 119, 128, 0.15);
        &-bm {
          margin-bottom: 16 * 2px;
        }
        &-top {
          margin: 0 10 * 2px;
          padding: 10 * 2px 0;
          border-bottom: 1px solid rgba(115, 119, 128, 0.15);
          &-left {
            width: 48 * 2px;
            height: 48 * 2px;
            overflow: hidden;
            border-radius: 100px;
            margin-right: 10 * 2px;
          }
          &-right {
            flex: 1;
            &-top {
              width: 100%;
              justify-content: space-between;
            }
            &-title {
              @include multi-line-omit(1);
              color: #0d1824;
              font-size: 14 * 2px;
              font-weight: 510;
              line-height: 20 * 2px;
            }
            &-icon {
              margin-left: 10 * 2px;
              width: 20px;
              height: 20px;
            }
            &-desc {
              color: rgba(136, 142, 147, 0.9);
              font-size: 13 * 2px;
              font-weight: 400;
              line-height: 18 * 2px;
            }
          }
        }
        &-bottom {
          padding: 6 * 2px 10 * 2px;
          justify-content: space-between;
          &-left {
            &-text {
              color: #999da7;
              font-size: 13 * 2px;
              font-weight: 400;
            }
            &-bdc {
              color: #007bff;
              font-size: 13 * 2px;
              font-weight: 590;
            }
            &-progress {
              border: 2px solid #99caff;
              margin-right: 12 * 2px;
              width: 140 * 2px;
            }
          }
          &-right {
            justify-content: space-between;
            &-icon {
              width: 18 * 2px;
              height: 18 * 2px;
              margin-right: 4 * 2px;
            }
            &-bdc {
              margin-left: 4 * 2px;
              color: #007bff;
              font-size: 13 * 2px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 19;
  border-radius: 12 * 2px 12 * 2px 0px 0px;
  background: #fff;
  overflow: hidden;
  padding: 15 * 2px;
  box-shadow: 0px -4 * 2px 16 * 2px 0px rgba(0, 0, 0, 0.1);
  &-top {
    width: 100%;
    border-radius: 4 * 2px;
    background: #f0f3fa;
    margin-bottom: 15 * 2px;
    &-left {
      padding: 6 * 2px 0 * 2px;
      margin: 0 8 * 2px;
      color: #999da7;
      font-size: 14 * 2px;
      font-weight: 400;
    }
    &-center {
      @include multi-line-omit(1);
      flex: 1;
      text-wrap: nowrap;
      white-space: nowrap;
      color: #141924;
      font-size: 14 * 2px;
      font-weight: 600;
      margin-right: 8 * 2px;
    }
    &-copy {
      height: 100%;
    }
  }
  &-bottom {
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.25) inset;
    text-align: center;
    border-radius: 100px;
    width: 100%;
    color: #fff;
    font-size: 17 * 2px;
    font-weight: 600;
    padding: 11 * 2px 0;
    margin-bottom: var(--safe-area-inset-bottom);
  }
}
.pull-refresh {
  padding-bottom: 10 * 2px;
}
.broadcastview {
  margin-top: 12 * 2px;
}
.notData {
  justify-content: center;
  flex-direction: column;
  position: relative;
  min-height: 150 * 2px;
  &-img {
    width: 120 * 2px;
    height: 120 * 2px;
  }
  &-desc {
    margin-top: -22 * 2px;
    color: #999da7;
    font-size: 13 * 2px;
  }
}
</style>
<style lang="scss">
:root:root {
  --van-pull-refresh-head-text-color: #fff;
}
.pull-refresh {
  overflow: initial;
  .van-pull-refresh__head {
    z-index: 99;
    .van-loading {
      color: #007bff;
    }
  }
  .van-loading__text {
    z-index: 9999999;
    color: #fff;
  }
}
</style>
